Candlestick Chart (ক্যান্ডেলস্টিক চার্ট) মূলত স্টক মার্কেট এবং ফাইন্যান্সিয়াল ডেটা বিশ্লেষণের জন্য ব্যবহৃত হয়। এটি সময়ের সাথে প্রাইস মুভমেন্ট দেখানোর জন্য প্রতিটি পিরিয়ডের জন্য একটি ক্যান্ডেল বা বক্স তৈরি করে, যা ওপেন, ক্লোজ, হাই, এবং লো প্রাইসগুলোকে চিহ্নিত করে।

Google Charts API-এ Candlestick Chart তৈরি করতে কিছু নির্দিষ্ট ডেটা এবং কাস্টমাইজেশন প্রয়োজন হয়। এখানে আমরা ক্যান্ডেলস্টিক চার্ট তৈরি করার জন্য প্রয়োজনীয় ধাপগুলো দেখাবো।

Step 1: Angular প্রজেক্ট তৈরি করা

প্রথমে একটি নতুন Angular প্রজেক্ট তৈরি করুন (যদি আপনার আগে থেকেই কোনও প্রজেক্ট থাকে, তবে সেটি ব্যবহার করতে পারেন):

ng new google-charts-candlestick
cd google-charts-candlestick

Step 2: angular-google-charts লাইব্রেরি ইন্সটল করা

Google Charts লাইব্রেরি ব্যবহার করতে angular-google-charts প্যাকেজটি ইন্সটল করতে হবে। এটি ইনস্টল করার জন্য নিচের কমান্ডটি ব্যবহার করুন:

npm install angular-google-charts

এটি ইনস্টল হওয়ার পর angular-google-charts লাইব্রেরি আপনার node_modules ফোল্ডারে যুক্ত হয়ে যাবে।

Step 3: GoogleChartsModule ইমপোর্ট করা

এখন, Angular অ্যাপে GoogleChartsModule ব্যবহার করতে, app.module.ts ফাইলে এটি ইমপোর্ট করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts'; // GoogleChartsModule ইমপোর্ট

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GoogleChartsModule // এখানে GoogleChartsModule যোগ করুন
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Candlestick Chart তৈরি করা

এখন, আমরা Candlestick Chart তৈরি করতে যাব। Candlestick Chart তৈরি করার জন্য আমাদের High, Low, Open, এবং Close ডেটা প্রয়োজন।

app.component.ts ফাইল:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Candlestick Chart Example';

  chartType = 'CandlestickChart'; // Chart Type
  chartData = [
    ['Mon', 20.66, 18.73, 22.56, 20.34],
    ['Tue', 21.22, 19.25, 22.28, 20.50],
    ['Wed', 22.60, 20.40, 23.80, 21.98],
    ['Thu', 23.50, 22.10, 24.60, 23.02],
    ['Fri', 24.80, 23.60, 26.00, 24.20]
  ]; // Data: [Day, Open, Close, High, Low]
  
  chartOptions = {
    title: 'Stock Price Movement',
    legend: 'none',
    candlestick: {
      fallingColor: { strokeWidth: 0, fill: '#a52714' }, // Falling color
      risingColor: { strokeWidth: 0, fill: '#0f9d58' }  // Rising color
    },
    width: 800,
    height: 400
  };
}

এখানে, chartData এর মধ্যে প্রতিটি দিনের জন্য Open, Close, High, এবং Low প্রাইস রয়েছে। এই ডেটা থেকে Candlestick Chart তৈরি হবে।

app.component.html ফাইল:

<h1>{{ title }}</h1>

<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

এখানে, google-chart কম্পোনেন্টটি ব্যবহার করে আমরা Candlestick Chart রেন্ডার করেছি এবং chartData এবং chartOptions কাস্টমাইজ করেছি।

Step 5: অ্যাপ্লিকেশন চালানো

এখন Angular অ্যাপ্লিকেশনটি চালানোর জন্য নিচের কমান্ডটি ব্যবহার করুন:

ng serve

এটি ডিফল্টভাবে অ্যাপ্লিকেশনটি http://localhost:4200 এ রান করবে। ব্রাউজারে গিয়ে আপনি আপনার Candlestick Chart দেখতে পাবেন।

Candlestick Chart কাস্টমাইজেশন

Google Charts API-এ Candlestick Chart কাস্টমাইজ করতে বেশ কিছু অপশন রয়েছে:

1. Colors:
   • risingColor: রাইজিং (বৃদ্ধি) ক্যান্ডেলসের জন্য রঙ।
   • fallingColor: ফলিং (কমে যাওয়া) ক্যান্ডেলসের জন্য রঙ।
2. Width and Height:
   • আপনি width এবং height সেট করে চার্টের সাইজ কাস্টমাইজ করতে পারেন।
3. Title:
   • title অপশন দিয়ে চার্টের টাইটেল কাস্টমাইজ করা যায়।
4. Legend:
   • legend: 'none' সেট করে লেজেন্ড নিষ্ক্রিয় করতে পারেন।

এছাড়া আপনি আরও অনেক কাস্টমাইজেশন করতে পারেন, যেমন গ্রিডলাইন, অক্ষের স্টাইল, টুলটিপ ইত্যাদি।

সারাংশ

এই প্রক্রিয়ায়, আমরা Candlestick Chart তৈরি করতে Google Charts API এবং Angular ব্যবহার করেছি। CandlestickChart ফাইন্যান্সিয়াল ডেটা এবং স্টক মার্কেটের বিশ্লেষণের জন্য খুবই জনপ্রিয়। Google Charts API ব্যবহার করে আমরা খুব সহজেই এটি কাস্টমাইজ এবং রেন্ডার করতে পারি। CandlestickChart-এর মাধ্যমে আপনি সময়ের সাথে Open, Close, High, এবং Low প্রাইস মুভমেন্ট দেখাতে পারবেন।